import {Image, StyleSheet, View, Text, TouchableOpacity, FlatList, Modal} from 'react-native';
import {Stack, useRouter} from "expo-router";
import {useEffect, useState} from "react";
import avator from "@/assets/images/me/avator.png"
import CheckBox from "expo-checkbox"
import * as React from "react";
import {scaleSize} from "@/utils/screenSize";
import {useActionSheet} from "@expo/react-native-action-sheet";
import {useConversationStore} from "@/hooks/im/conversation";
import {index} from "@zxing/text-encoding/es2015/encoding/indexes";

export default function removeGroupManScreen() {

    const currentGroupList = useConversationStore((state) => state.currentGroupList);
    const kickGroupMember = useConversationStore((state) => state.kickGroupMember);


    const router = useRouter();
    const [flag, setFlag] = useState(false);
    const [foundTextModel, setFoundTextModel] = useState(false);
    const [list, setList] = useState([]);


    useEffect(() => {
        const tmpArr = [];
        currentGroupList.map((item) => {
            if (item?.roleLevel < 100) {
                Reflect.set(item, "select", false);
                tmpArr.push(item);
            };
        });
        setList(tmpArr);
    },[currentGroupList]);

    const changeSelectRemove = function (index) {
        const lists = list;
        const tmp = lists.map((item, idx) => {
            if (idx == index) {
                Reflect.set(item, "select", !item.select);
            };
            return item
        })
        setList(tmp);
    };

    const computedLength = function () {
        const lists = list.map((item) => {
            if (item.select == true) {
                return item;
            };
        })
        console.log("computedLength", lists);
        return lists.length
    };

    const removeGroupPerson = function () {
        const tmpArr = [];
        list.forEach((item) => {
            if (item.select) {
               tmpArr.push(item.userID)
            };
        })
        console.log('memberList', tmpArr);
        kickGroupMember(tmpArr)
        setFoundTextModel(false)
    };

    const renderItem = ({ item, index }) => {
        // console.log('item', item)
        const items = item;
        return (
            <TouchableOpacity onPress={() => changeSelectRemove(index)}>
                <View style={styles.groupListItem}>
                    <View style={styles.groupListLeft}>
                        <View>
                            <CheckBox
                                style={styles.checkboxSty}
                                value={items?.select}
                                color={items?.select ? '#EC6138' : undefined} // 修改激活时的颜色
                                // onValueChange={(bol) => changeSelectRemove(index, bol)}
                            />
                        </View>
                        <View style={styles.avator}>
                            <Image source={avator} style={{ width: "100%", height: "100%" }} />
                        </View>
                        <View style={styles.name}>
                            <Text style={styles.nameText}>{ items?.nickname }</Text>
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        )
    };

    return (
        <View style={{ height: "100%", backgroundColor: "#FFF" }}>
            <Stack.Screen
                options={{
                    title: '移除群成员', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#FFF', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <Text>取消</Text>
                        </TouchableOpacity>
                    ),
                    headerRight: () => (
                        list.filter(item => item?.select).length > 0 && (
                            <TouchableOpacity onPress={() => setFoundTextModel(true)}>
                                <Text style={{ color: "#EC6138" }}>移除({ list.filter(item => item?.select).length })</Text>
                            </TouchableOpacity>
                        )
                    ),
                }}
            />
            <View style={{ paddingTop: 16, }}>
               <View style={styles.removeHeaderListWrap}>
                   {
                       list.length > 0 && list.map((item, index) => {
                           if (item?.select) {
                               return (
                                   <View style={styles.removeHeaderWrap}>
                                       <Image source={avator} style={{ width: "100%", height: "100%" }}/>
                                   </View>
                               )
                           };
                       })
                   }
               </View>
            </View>
            <FlatList
                data={list}
                renderItem={renderItem}
                keyExtractor={(item, index) => item?.userID}
            />
            <Modal
                animationType="fade"
                transparent={true}
                visible={foundTextModel}
            >
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={(event) => {
                        if (event.target === event.currentTarget) {
                            setFoundTextModel(false);
                        }
                    }}
                    style={styles.becameModelContainer}
                >
                    <View style={styles.becameModelWrap}>
                        <View style={styles.becameModelTitle}>
                            <Text style={styles.becameModelTitleText}>移除</Text>
                        </View>
                        <View>
                            <Text style={{textAlign: "center", marginBottom: 34, color: "#676978"}}>确定移除{ list.filter(item => item?.select).length }位成员？</Text>
                        </View>
                        <View style={styles.becameFootWrap}>
                            <TouchableOpacity onPress={() => setFoundTextModel(false)}>
                                <View style={styles.cancelBtn}>
                                    <Text style={styles.cancelBtnText} >取消</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={removeGroupPerson}>
                                <View style={styles.okBtn}>
                                    <Text style={styles.okBtnText}>确认</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </View>
                </TouchableOpacity>
            </Modal>
        </View>

    );
}

const styles = StyleSheet.create({
    removeHeaderListWrap: {
        flexDirection: "row",
        flexWrap: "wrap",
        borderBottomWidth: 6,
        borderBottomColor: "#F7F7F7",
        borderStyle: "solid",
        paddingHorizontal: 12,
        paddingBottom: 6,
    },
    removeHeaderWrap: {
        width: 36,
        height: 36,
        marginRight: 11,
        marginBottom: 11,
    },
    groupListLeft: {
        flexDirection: "row",
        alignItems: "center",
        flex: 1,
    },
    groupListItem: {
        flexDirection: "row",
        alignItems: "center",
        marginTop: 16,
        paddingHorizontal: 12,
    },
    avator: {
        width: 44,
        height: 44,
    },
    name: {
        marginLeft: 10,
    },
    nameText: {
        fontStyle: "normal",
        color: "#2A2B30",
        fontFamily: "PingFang SC, PingFang SC",
    },
    root: {
        color: "#C0C3CE"
    },
    cancelWrap: {
        marginLeft: 16,
    },
    cancel: {
        color: "#9C9EAC"
    },
    navCancel: {
        color: "#2A2B30"
    },
    checkboxSty: {
        borderRadius: 50,
        borderWidth: 1,
        borderColor: "#9C9EAC",
        width: 16,
        height: 16,
        marginRight: 12,
    },
    becameModelContainer: {
        backgroundColor: 'rgba(0,0,0, 0.7)',
        height: "100%",
    },
    becameModelWrap: {
        width: scaleSize(296),
        // height: scaleSize(270),
        backgroundColor: "#fff",
        margin: "auto",
        borderRadius: 8,
        paddingTop: 24,
        paddingLeft: 18,
        paddingRight: 18,
        paddingBottom: 20,
        position: "relative",
        zIndex: 9,
    },
    becameModelTitle: {
        marginBottom: 14,
    },
    becameModelTitleText: {
        textAlign: "center",
        fontSize: 16,
        // fontWeight: "bold"
        // color: "#2A2B30"
    },
    becameFootWrap: {
        // marginTop: 58,
        flexDirection: "row",
        justifyContent: "space-between",
        paddingLeft: 10,
        paddingRight: 10,
    },
    cancelBtn: {
        backgroundColor: "#F7F8F9",
        width: 114,
        height: 38,
        borderRadius: 19,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    cancelBtnText: {
        // fontWeight: "bold",
    },
    okBtnText: {
        color: "#fff",
        fontWeight: "bold",
    },
    okBtn: {
        backgroundColor: "#EC6138",
        width: 114,
        height: 38,
        borderRadius: 19,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
});
